/**
 * 磅房入口页面 
 */

import { useCallback, useEffect, useState } from "react";
import { EntranceBox } from "./styled"
import { message } from "antd";
import { getGbSystemSetPoundName } from "../api";
import { useNavigate } from "react-router-dom";

interface IList {
  id: number
        poundName: string
        toleranceRange:number;
        isClosed: number;
}

const EntrancePage = () => {
    const history = useNavigate();
    const [listData, setListData] = useState<IList[]>([]);

    const listFun = useCallback(async () => {
        const { code, msg, data } = (await getGbSystemSetPoundName()) as {
            code: number;
            msg: string;
            data: IList[];
        };
        if (code === 20000) {
            setListData(data)
        } else {
            message.error(msg);
        }
    }, [])

    useEffect(() => {
        listFun()
    }, [listFun])

    return (
        <EntranceBox>
            <div className="entrance">
                <div className="head">
                    <span className="iconfont home">&#xe681;</span>
                    <div>请选择磅房进入</div>
                </div>
                <div className="body">
                    {
                        listData.map((item, index) => (
                            <div className="body-item" key={index} onClick={() => {history(`/home/WeigingRoomPage`,{state:{poundId:item?.id,poundName:item?.poundName,toleranceRange:item?.toleranceRange, isClosed: item.isClosed}})}}>
                                {/* <span className="iconfont">&#xe601;</span> */}
                                <div className="carImg"></div>
                                <div>{item?.poundName}</div>
                            </div>
                        ))
                    }
                </div>
            </div>
        </EntranceBox>
    )
}

export default EntrancePage